<!--
 * @Author: AFun
-->
<template>
  <div class="ui-image flex mr-1 mt-0">
    <van-image
      v-if="info.extension.model.value"
      :ref="info._id"
      v-ui-ref="vSetRef"
      :fit="info.extension.fit.value"
      :src="info.extension.model.value"
      :style="{
        width: `${info.extension.width.value}px`,
        height: `${info.extension.height.value}px`,
        position: relative,
        top: `${info.extension.top.value}px`,
        left: `${info.extension.left.value}px`,
      }"
    />
    <div
      v-else
      :style="{
        width: `${info.extension.width.value}px`,
        height: `${info.extension.height.value}px`,
      }"
    >
      <vui-icon icon="image-line" style="font-size: 80px" />
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { Image as VanImage } from 'vant'
  import { UiMixin, RefsInjectMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiPdaImage',
    components: { VanImage },
    mixins: [UiMixin, RefsInjectMixin],
    data() {
      return {}
    },
    computed: {
      getDataSource() {
        return this.info.dataSourceBind.sourceId
      },
    },
  })
</script>
<style scoped></style>
